---
image: /generated/articles-docs-timeline-setup.png
title: Timeline – Setup
sidebar_label: Setup
id: setup
---

## Installation

1. Copy the `timeline/` folder to your application
2. Install the required dependencies:

```bash
npm install remotion @remotion/player @remotion/media-utils tailwindcss
```

## Tailwind Configuration

### Using Tailwind CSS v4 (Current Project)

This project uses Tailwind CSS V4. Import `src/timeline/theme/timeline.css` in your global CSS file:

```css
@import './timeline/theme/timeline.css';
```

You can customize the colors by modifying the values in the `@theme` block.

### Using Tailwind CSS v3 (Legacy)

<details>
  <summary>
  Instructions for Tailwind v3
  </summary>
Use `src/timeline/theme/timeline-preset.mjs` as a preset in your `tailwind.config.js`:

Then, set up your `tailwind.config.js` like this:

```js
import timelinePreset from './timeline/theme/timeline-preset.mjs';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [timelinePreset],
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // Add your custom theme extensions here
    },
  },
};
```

</details>
